<template>
  <div>
    <div>{{ obj.name }} {{ obj.age }}岁</div>
    <div>
      {{ count }}
    </div>
    <div>
      {{ doubleCount }}
    </div>
    <button @click="add">+</button>
  </div>
</template>

<script setup>
import { watch, computed, ref, reactive } from "vue";

defineProps({
  msg: String,
});
// reactive函数之能定义复杂变量，并且不等直接用 = 赋值。（reactive 最好只有确定的对象里的字段不会变化时使用）
const obj = reactive({ name: "张兴达", age: 25 });

// 用ref函数定义的变量在JS里使用的时候要加 .value
let count = ref(666);

const add = () => {
  ++count.value;
  ++obj.age;
};

// 计算属性
let doubleCount = computed(() => {
  return count.value * 2;
});

// 监听属性
// 只监听一个变量
watch(count, (n, o) => {
  console.log(n, "监听一个变量newCount");
  // console.log(o, "监听一个变量oldCount");
});
// 监听多个变量  [count, doubleCount]  只要一个变换就会触发
watch([count, doubleCount], (n, o) => {
  console.log(n, "监听多个变量newCount"); // [666, 666*2]
  // console.log(o, "监听多个变量oldCount");
});
//深度监听1 & 立即执行
watch(
  obj,
  (n, o) => {
    console.log(n, "深度监听监听一个obj变量");
  },
  { deep: true, immediate: true } //深度监听
);
//深度监听2  只监听对象上的某一个属性
watch(
  () => obj.age,
  (n, o) => {
    console.log(n, "深度监听监听一个obj变量");
  }
);
</script>

<style scoped>
</style>
